<template>
  <div class="main_404 w-full h-full flex items-center justify-center">
    <div
      class="w-[50%] h-[60%] bg-white opacity-[0.8] rounded-[20px] text-[#000]"
    >
      <p class="w-full h-[80%] flex items-center justify-center text-[300px]">
        <span>404</span>
      </p>
      <p class="w-full flex items-center justify-center text-[20px]">
        <span>很抱歉！您访问的页面不存在...</span>
      </p>
      <p class="w-full flex items-center justify-center text-[20px]">
        <span
          >返回>>><span
            class="cursor-pointer text-[blue]"
            @click="router.push('/')"
            >首页</span
          ></span
        >
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { useRoute, useRouter } from "vue-router";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();
    return {
      router,
    };
  },
});
</script>

<style lang="scss" scoped>
.main_404 {
  background-image: url("../../assets/404jpg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}
</style>
